<template>
  <div class="h-[394px] space-y-4 font-pingfang text-black">
    <h2 class="text-sm font-light">创建草稿模板</h2>

    <div class="space-y-2 text-xs text-gray-500 font-medium">
      <p>1.打开剪映，使用你的模版草稿，将文字轨修改成以下红字内容；</p>
      <p>
        商品名称：<span class="text-red-500 mr-3">111111</span> 核心卖点：<span
          class="text-red-500 mr-3"
          >222222</span
        >
        视频文案：<span class="text-red-500">333333</span>
      </p>
      <p class="hidden">2.找一段视频，修改文件名并放在视频素材下载目录，添加到剪映主轨；</p>
      <p class="hidden">视频素材：<span class="text-red-500">AAAAAA</span></p>
      <p>2.关闭剪辑窗口，修改草稿名称为红字内容；</p>
      <p>草稿名称：<span class="text-red-500">创意魔方</span></p>
    </div>

    <div class="space-y-2">
      <h2 class="text-sm font-light">剪映草稿目录</h2>
      <Row :span="24" class="items-center">
        <Col :span="2" class="text-xs text-gray-500">地址</Col>
        <Col :span="20">
          <AInput
            class="rounded-none w-full cursor-pointer"
            :value="workflowStore.getDraftDirectory"
            readonly
            @click="selectDirectory('draftDirectory')"
          />
        </Col>
      </Row>
      <p class="text-[10px] text-gray-500 ml-8">
        *打开剪映-设置-全局设置-草稿位置,复制进来,加上你的草稿名称
      </p>
    </div>

    <div class="space-y-2">
      <h2 class="text-sm font-light">视频素材下载目录</h2>
      <Row :span="24" class="items-center">
        <Col :span="2" class="text-xs text-gray-500">地址</Col>
        <Col :span="20">
          <AInput
            class="rounded-none w-full cursor-pointer"
            :value="workflowStore.getMaterialDirectory"
            readonly
            @click="selectDirectory('materialDirectory')"
          />
        </Col>
      </Row>
      <p class="text-[10px] text-gray-500 ml-8">*浏览器下载的视频素材存放位置</p>
    </div>

    <div class="flex justify-end">
      <AButton type="primary" class="w-28 bg-primary text-white text-sm" @click="handleRunCheck">
        <template #icon>
          <img :src="Checking" class="inline-block w-4.5 h-[15px] mr-1" />
        </template>
        运行检测
      </AButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Checking from '@main/assets/images/workflow/checking.webp';
import { Row, Col, message } from 'ant-design-vue';
import { useWorkflowStore } from '@main/store/workflow';
import { draftCheckApi } from '@main/service/setting/index';
import { selectFolder, getFile } from '@main/utils/fs';

const workflowStore = useWorkflowStore();

let beingSelect = false;
const selectDirectory = async (target: string) => {
  if (beingSelect) return;
  beingSelect = true;
  const folder = await selectFolder();
  if (folder)
    workflowStore.setDirectorySetting({
      [target]: folder
    });
  beingSelect = false;
};

const handleRunCheck = async () => {
  if (!workflowStore.getDraftDirectory) {
    message.warning('请先设置剪映草稿目录');
    return;
  }

  const file = await getFile({
    directory: workflowStore.getDraftDirectory,
    fileName: 'draft_content.json',
    readType: 'Stream'
  });

  if (!file) {
    message.error('检测失败，未获取到文件内容');
    return;
  }

  const formData = new FormData();
  formData.append('content_stream', file.toString());
  if (await draftCheckApi(formData)) message.success('检测通过，文件内容验证成功');
  else message.error('检测未通过，文件内容验证失败');
};
</script>
